<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于的前端展示</title>
    <!--引入vue.js库-->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="/js/vue.js"></script>
    <!-- element-ui引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- element-ui引入组件库 -->
    <script src="/js/index.js"></script>
    <!--引入axios库-->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="/js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <!-- 根据参数查询 和 添加数据 -->
    <el-row>
        <el-col :span="4">
            <el-input v-model="searchForm.name" placeholder="请输入查询名"></el-input>
        </el-col>
        <el-col :span="6">&nbsp;&nbsp;&nbsp;</el-col>
        <el-col :span="8">
            <el-button type="success" size="mini" icon="el-icon-search" @click="search">搜索</el-button>
            <el-button type="primary" size="mini" icon="el-icon-refresh" @click="refresh">刷新</el-button>
        </el-col>
        <el-col :span="6"></el-col>
    </el-row>

    <!--    查询-->
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column width="200" prop="name" label="姓名"></el-table-column>
        <el-table-column width="300" prop="about" label="内容"></el-table-column>
        <el-table-column width="120" :formatter="getStatus" prop="isvalid" label="是否有效"></el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[6, 12, 24, 120]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
<script>
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                //表格数据
                tableData: [],//返回的查询数据
                currentPage: 1,//页码
                pageSize: 6,//每页显示的数量
                total: 100,//分页总数量
                searchForm: {name: ''},//查询携带的参数
                //添加或者更新数据时 携带的参数
            }
        },
        //加载时默认执行的方法
        created: function () {
            //调用封装的方法
            this.loadData();
        },
        methods: {//定义变量_this等于外面的this
            //封装请求数据的方法
            loadData() {
                var _this = this;
                axios.post('/tAbout/queryById', {
                    pageNo: this.currentPage,
                    pageSize: this.pageSize,
                    data: {
                        "name": this.searchForm.name
                    }
                })
                    .then(function (response) {
                        console.log(response);
                        //判断是否执行成功
                        if (response.data.code == 200) {
                            _this.tableData = response.data.data.list;
                            _this.total = response.data.data.total;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            getStatus(row, column, cellValue, index) {
                return cellValue == 1 ? "有效" : "无效";
            },
            getStatus1(row, column, cellValue, index) {
                if (cellValue ==1){
                    return "backstage"
                }
                return cellValue == 2 ? "web" : "client";
            },
            //实行每页有多少条的方法
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.loadData();
            },
            //实现跳转页的方法
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.loadData();
            },
            //刷新
            refresh() {
                //原始js重新请求
                location.reload();
            },
            //查询方法
            search() {
                this.loadData();
                //搜索时,使页码为1
                this.currentPage = 1;
            },
        }
    })
</script>
</body>
</html>